<template>
	<view class="header">
		<view class="uesr">
			<view class="top-xh">
				<view class="h2">
					个人中心
				</view>
				<navigator url="/pages/user/ai" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/xiaoxi.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
				</navigator>
			</view>
			<view @click="wxlogin" class="fot-xh" v-if="userinfo==null">
				<view class="pic">
					<image
						src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
						style="width: 130rpx;" mode="widthFix">
					</image>
				</view>
				<view class="click-login">
					点击登录
				</view>
			</view>
			<view class="fot-xh" v-else>
				<navigator url="/pages/user/my" hover-class="none">
					<view class="pic">
						<u-avatar :src="userinfo.avatar" :size="70"></u-avatar>
						<!-- <image :src="userinfo.avatar" style="width: 130rpx;" mode="widthFix">
						</image> -->
					</view>
					<view class="txt">
						<view class="name">
							<view class="h3">
								{{userinfo.nickName}}
							</view>
							<view class="phone">
								{{userinfo.sex == 0?'男':(userinfo.sex==1?'女':'未知')}}
							</view>
						</view>
					</view>
				</navigator>
			</view>

		</view>
		<view class="about" v-show="userinfo!=null">
			<view class="m-a1">
				<navigator url="/pages/user/my" hover-class="none">
					<!-- <view class="pic">
						<image src="../../static/cy-my/tianjia.png" style="width: 76rpx;" mode="widthFix"></image>
					</view> -->
					<view class="txt">
						<text class="s1" v-if="userinfo">{{userinfo.signature}}</text>
						<text class="s1" v-else>此人很懒没有留下个性签名~</text>
						<!-- <text>记录宝宝成长</text> -->
					</view>
				</navigator>
			</view>
		</view>
		<view class="ul-list1-xh">
			<view class="li">
				<navigator url="/pages/user/my-like" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/qianbao.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text>我的收藏</text>
					</view>
				</navigator>
			</view>
			<view class="li">
				<navigator url="/pages/user/history" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/dingdan.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text>浏览记录</text>
					</view>
				</navigator>
			</view>
			<view class="li">
				<navigator url="/pages/user/ai" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/dizhi.png" style="width: 33rpx;  height:45rpx;" mode="widthFix">
						</image>
					</view>
					<view class="txt">
						<text>我的Ai</text>
					</view>
				</navigator>
			</view>
			<!-- 		<view class="li">
				<navigator url="" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/yijian.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text>意见反馈</text>
					</view>
				</navigator>
			</view> -->
			<view class="li">
				<navigator url="/pages/user/about" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/guanyhu.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text>关于我们</text>
					</view>
				</navigator>
			</view>
			<view @click="clearHuancun" class="li">
				<navigator url="" hover-class="none">
					<view class="pic">
						<image src="../../static/cy-my/shehzi.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view class="txt" style="border-bottom: none;">
						<text>清除缓存</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		logout
	} from '../../api/user';
	import {
		wxGetToken,
		wxLogin
	} from '../../api/wxlogin';
	import {
		setToken
	} from '../../utils/auth';
	export default {
		data() {
			return {
				title: 'Hello',
				userinfo: null,
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('user-info') || null
		},
		methods: {
			clearHuancun() {
				uni.showModal({
					title: '系统提示',
					content: '确定清除系统所有缓存吗？',
					success: function(res) {
						if (res.confirm) {
							// 退出登录
							// logout()
							//清除所有缓存
							uni.clearStorageSync();
							//刷新页面
							uni.reLaunch({
								url: '/pages/user/user'
							})
						}
					}
				});
			},
			wxlogin() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						console.log(event.code);
						console.log(event);
						const {
							code
						} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						wxGetToken(event.code).then((res) => {
							const data = {
								"accessToken": res.token,
								"openid": res.openId,
							}
							wxLogin(data).then((res) => {
								this.userinfo = res.userInfo
								//获得token完成登录
								setToken(res.token)
								//存储用户信息
								uni.setStorageSync('user-info', res.userInfo);
								//刷新页面
								uni.reLaunch({
									url: '/pages/user/user'
								})
							})
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.click-login {
		font-weight: bold;
		font-size: 42rpx;
		padding-left: 80rpx;
		padding-top: 30rpx;
		letter-spacing: 15rpx;
	}

	.top-xh {
		padding-top: 40rpx;
		overflow: hidden;
		margin-bottom: 60rpx;

	}

	.top-xh .h2 {
		float: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.top-xh .pic {
		float: right;
	}

	.uesr {
		overflow: hidden;
		padding: 0 30rpx;
		// background: url(../../static/cy-my/beijing1_03.png) no-repeat 0 center;
		height: 345rpx;
	}

	.fot-xh .pic {
		float: left;
		margin-right: 30rpx;
	}

	.fot-xh .txt {
		padding: 20rpx 0;
		overflow: hidden;
	}

	.fot-xh .txt .name {
		position: relative;
		display: block;
	}

	.fot-xh .txt .name .h3 {
		font-size: 36rpx;
		margin-bottom: 13rpx;
		font-weight: bolder;
	}

	.fot-xh .txt .name .phone {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		width: 330rpx;
		background: url(../../static/cy-my/jifen.png) no-repeat right center;
		background-size: 120rpx;
		color: rgb(68, 68, 68);
	}

	.fot-xh .name::after {
		content: '';
		position: absolute;
		border-top: 4rpx solid rgb(179, 179, 179);
		border-left: 4rpx solid rgb(179, 179, 179);
		width: 14rpx;
		height: 14rpx;
		right: 5rpx;
		top: 30%;
		transform: rotate(135deg);
	}

	.m-a1 {
		overflow: hidden;
		padding: 20rpx;
		background-color: #fff;
		margin: 0 60rpx;
		box-shadow: 0rpx 5rpx 16rpx 0rpx rgb(226, 236, 255);
		margin-top: -40rpx;
		border-radius: 40rpx;

	}

	.m-a1 .txt {
		overflow: hidden;
	}

	.m-a1 .pic {
		float: left;
		margin-right: 20rpx;
	}

	.m-a1 text {
		display: block;
		font-size: 24rpx;
		color: rgb(179, 179, 179);
	}

	.m-a1 .txt .s1 {
		font-size: 24rpx;
		margin-bottom: 10rpx;
		color: rgb(0, 0, 0);
		font-weight: bold;
	}

	.ul-list1-xh {
		overflow: hidden;
		padding: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 300rpx;
	}

	.ul-list1-xh .li {
		padding: 20rpx 0;
		overflow: hidden;
		position: relative;

	}

	.ul-list1-xh .li .pic {
		float: left;
		margin-right: 20rpx;

	}

	.ul-list1-xh .li .txt {
		overflow: hidden;
		font-size: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgb(242, 242, 242);
	}

	.ul-list1-xh .li::after {
		content: '';
		position: absolute;
		border-top: 3rpx solid rgb(179, 179, 179);
		border-left: 3rpx solid rgb(179, 179, 179);
		width: 12rpx;
		height: 12rpx;
		right: 5rpx;
		top: 30%;
		transform: rotate(135deg);
	}
</style>